<!-- 添加修改地址 -->
<template>
  <view class="address-wrap">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
      <!-- 地址定位 -->
      <!-- <view
        class="location-item u-flex u-row-between u-p-20 u-m-b-20"
        @tap="getLocation"
      >
        <view class="u-flex">
          <text class="u-iconfont uicon-map-fill" style="#A084F0;"></text>
          <text>{{ chooseAddress }}</text>
        </view>
        <text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
      </view> -->

      <view class="address-box">
        <!-- 地址表单 -->
        <u-form-item
          :labelStyle="labelStyle"
          　
          label-width="150"
          label-position="left"
          label="收货人:"
          prop="consignee"
        >
          <u-input
            placeholder="请填写收货人姓名"
            v-model="model.consignee"
            type="text"
          ></u-input>
        </u-form-item>
        <u-form-item
          :labelStyle="labelStyle"
          　
          label-width="150"
          label-position="left"
          label="手机号:"
          prop="phone"
        >
          <u-input
            placeholder="请输入收货人手机号"
            v-model="model.phone"
            type="number"
          ></u-input>
        </u-form-item>
        <u-form-item
          :labelStyle="labelStyle"
          label-width="150"
          label-position="left"
          label="所在地区:"
          prop="area_text"
        >
          <u-input
            type="select"
            v-model="model.area_text"
            :select-open="showSelect"
            placeholder="请选择地区"
            @click="showSelect = true"
          ></u-input>
        </u-form-item>
        <u-form-item
          :labelStyle="labelStyle"
          label-position="left"
          label-width="150"
          label="详细地址:"
          prop="address"
        >
          <u-input
            border
            type="textarea"
            v-model="model.address"
            placeholder="如道路、门牌号、小区、楼栋号、单元室等"
          />
        </u-form-item>
      </view>

      <!-- 设置默认 -->
      <view class="default-box u-flex u-row-between">
        <text class="title">设为默认地址</text>
        <u-switch
          v-model="model.is_default"
          activeColor="#A084F0"
          size="40"
        ></u-switch>
      </view>

      <!-- 功能按钮 -->
      <view class="foot_box u-p-30 u-m-t-50 u-flex u-row-around">
        <button
          v-show="addressId"
          class="u-m-20 u-reset-button delete-btn u-flex-1"
          @tap="deleteAddress"
        >
          删除收货地址
        </button>
        <button class="u-m-20 u-reset-button save-btn u-flex-1" @tap="submit">
          保存收货地址
        </button>
      </view>
    </u-form>

    <!-- 省市区选择器 -->
    <u-select
      mode="mutil-column-auto"
      safe-area-inset-bottom
      :list="addressAreaList"
      v-model="showSelect"
      @confirm="regionConfirm"
    ></u-select>
  </view>
</template>

<script>
import { MAP_KEY } from '@/env.js';
import Auth from '@/shopro/permission/index.js';
export default {
  components: {},
  data() {
    return {
      showSelect: false, //省市区
      addressAreaList: [],
      addressId: 0, //收货地址ID
      labelStyle: {
        'font-size': '28rpx',
        'font-weight': '600',
        color: '#595959',
      },
      model: {
        id: 0,
        consignee: '',
        phone: '',
        area_text: '',
        address: '',
        is_default: false,
        latitude: '',
        longitude: '',
      },
      rules: {
        phone: [
          {
            required: true,
            message: '请输入收货人手机号',
            trigger: ['change', 'blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur'],
          },
        ],
        consignee: [
          {
            required: true,
            message: '请填写收货人姓名',
            trigger: ['change', 'blur'],
          },
        ],
        area_text: [
          {
            required: true,
            message: '请选择地区',
            trigger: ['change', 'blur'],
          },
        ],
        address: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: ['change', 'blur'],
          },
        ],
      },
      errorType: ['message'],
      chooseAddress: '点击选择地理位置', //定位地址
    };
  },
  computed: {},
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad() {
    this.getArea();
    this.addressId = this.$Route.query.id ? this.$Route.query.id : 0;
    uni.setNavigationBarTitle({
      title: this.addressId ? '编辑收货地址' : '添加收货地址',
    });
    this.addressId && this.getAddressInfo();
    // 微信导入
    this.$Route.query.addressData && this.wxAddressInit();
  },

  methods: {
    // 获取省市区
    getArea() {
      this.$http('address.area').then((res) => {
        if (res.code === 1) {
          let { provinceData, cityData, areaData } = res.data;
          provinceData.forEach((item, index) => {
            this.addressAreaList.push({ ...item, children: [] });
            this.addressAreaList[index].children.push(...cityData[index]);
            this.addressAreaList[index].children.forEach((item1, index1) => {
              item1['children'] = [];
              item1.children.push(...areaData[index][index1]);
            });
          });
        }
      });
    },
    // 微信导入数据格式
    wxAddressInit() {
      let wxAddress = this.$Route.query.addressData; //微信导入
      this.model.id = 0;
      this.model.consignee = wxAddress.userName;
      this.model.phone = wxAddress.telNumber;
      // #ifdef MP-WEIXIN
      this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countyName}`;
      // #endif
      // #ifdef H5
      this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countryName}`;
      // #endif
      this.model.address = wxAddress.detailInfo.replace(/%20/g, '');
      this.model.is_default = false;
    },

    // 确认省市区
    regionConfirm(e) {
      this.model.area_text = `${e[0].label}-${e[1].label}-${e[2].label}`;
    },

    // 获取定位
    async getLocation() {
      let authState = await new Auth('userLocation').check();
      authState &&
        uni.chooseLocation({
          success: (res) => {
            console.log('222', res);
            this.model.latitude = res.latitude;
            this.model.longitude = res.longitude;
            this.getLocationInfo();
          },
          fail: (err) => {},
        });
    },

    //逆坐标解析
    async getLocationInfo() {
      this.chooseAddress = '定位中...';
      const [error, res] = await uni.request({
        url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.model.longitude},${this.model.latitude}&key=${MAP_KEY}`,
      });
      if (res.data.status === '1') {
        const addressComponent = res.data.regeocode.addressComponent;
        this.chooseAddress = res.data.regeocode.formatted_address;
        this.model.area_text = `${addressComponent.province}-${
          addressComponent.city.length
            ? addressComponent.city
            : addressComponent.province
        }-${addressComponent.district}`;
        this.model.address = res.data.regeocode.formatted_address.replace(
          `${addressComponent.province}${addressComponent.city}${addressComponent.district}`,
          ''
        );
      } else {
        console.log(
          '%c逆地址解析失败，请检查是否在env中配置地图key',
          'color:green;background:yellow'
        );
      }
    },

    // 提交
    submit() {
      this.$refs.uForm.validate((valid) => {
        valid ? this.editAddress() : console.log('验证失败');
      });
    },

    // 编辑添加地址
    editAddress() {
      let that = this;
      that
        .$http(
          'address.edit',
          {
            ...that.model,
            id: that.addressId,
          },
          '保存中...'
        )
        .then(async (res) => {
          if (res.code === 1) {
            this.$Router.back();
          }
        });
    },
    // 地址信息
    getAddressInfo() {
      const that = this;
      this.$http('address.info', {
        id: that.$Route.query.id,
      }).then((res) => {
        if (res.code === 1) {
          let addressData = res.data;
          that.addressId = addressData.id;
          that.model.area_text = `${addressData.province_name}-${addressData.city_name}-${addressData.area_name}`;
          that.model.is_default = addressData.is_default === '1' ? true : false;
          that.model.address = addressData.address;
          that.model.phone = addressData.phone;
          that.model.consignee = addressData.consignee;
        }
      });
    },

    // 删除收货地址
    deleteAddress() {
      const that = this;
      that
        .$http(
          'address.del',
          {
            id: that.addressId,
          },
          '删除中...'
        )
        .then((res) => {
          if (res.code === 1) {
            that.$Router.back();
          }
        });
    },
  },
};
</script>

<style lang="scss">
// 点击定位
.location-item {
  font-size: 28rpx;
  font-weight: 500;
  background-color: #fff;
  color: #a084f0;
}

// 表单
.address-box {
  background-color: #fff;
  padding: 0 30rpx;
}
.address-item {
  height: 96rpx;
  background: #fff;
  border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
  padding: 0 25rpx;

  .item-title {
    color: #333;
    font-size: 28rpx;
    white-space: nowrap;
  }
  .inp {
    color: #333;
    font-size: 28rpx;
  }
}
.area-box {
  min-height: 120rpx;
  padding-bottom: 60rpx;
  background: #fff;
  padding: 30rpx 25rpx;
  .item-title {
    font-size: 28rpx;
    line-height: 28rpx;
    vertical-align: middle;
    white-space: nowrap;
  }
  .area-inp {
    color: #333;
    font-size: 28rpx;
    vertical-align: middle;
    margin-top: 8rpx;
    width: 550rpx;
  }
}
.default-box {
  height: 100rpx;
  padding: 0 25rpx;
  background: #fff;
  margin-top: 20rpx;
  .title {
    font-size: 28rpx;
  }
  .switch {
    transform: scale(0.8);
  }
}
// 底部按钮
.foot_box {
  .delete-btn {
    line-height: 70rpx;
    background: linear-gradient(
      93deg,
      rgba(208, 19, 37, 1),
      rgba(237, 60, 48, 1)
    );
    box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
    font-size: 28rpx;

    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    border-radius: 35rpx;
    padding: 0;
    margin-right: 20rpx;
  }
  .save-btn {
    line-height: 70rpx;
    background: #a084f0;
    border: 1rpx solid #a084f0;
    border-radius: 40rpx;
    color: rgba(#fff, 0.9);
  }
}
</style>
